<template>
  <div>
    <el-card class="box-card">
      <el-tabs :tab-position="tabPosition">
        <el-tab-pane label="基本信息">
          <el-card class="box-card">
            <h3>车辆基本信息</h3>

                                    <el-form ref="driver" label-width="150px" :inline="true">
                                      <el-form-item label="员工编号:">
                                        <el-input disabled style="width: 370px;" v-model="dataAll.driverId"></el-input>
                                      </el-form-item>
                                      <el-form-item label="司机名称:">
                                        <el-input disabled style="width: 370px;" v-model="dataAll.driverName"></el-input>
                                      </el-form-item>
                                      <el-form-item label="所属机构:" >
                                        <el-input disabled style="width: 370px;" v-model="dataAll.orgName"></el-input>
                                      </el-form-item>
                                      <el-form-item label="所属车队:" >
                                        <el-input disabled style="width: 370px;" v-model="dataAll.fleetName"></el-input>
                                      </el-form-item>
                                      <el-form-item label="电话:" >
                                        <el-input disabled style="width: 370px;" v-model="dataAll.mobile"></el-input>
                                      </el-form-item>
                                      <el-form-item label="年龄:" >
                                        <el-input disabled style="width: 370px;" v-model="driverDetailsData.age"><template slot="append">岁</template></el-input>
                                      </el-form-item>
                                    </el-form>
            <el-button @click="faihui()">返回</el-button>
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="驾驶证信息">
          <el-card class="box-card">
            <h3>驾驶证信息</h3>

            <el-form ref="driverLicense" label-width="150px" :inline="true">
              <el-form-item label="驾驶证号:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;"
                          v-model="driverLicense.licenseNumber"></el-input>
              </el-form-item>
              <el-form-item label="准驾车型:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;"
                          v-model="driverLicense.allowableType"></el-input>
              </el-form-item>
              <el-form-item label="初次领证日期:">
                <el-date-picker
                  v-bind:disabled="disabledstatus"
                  style="width: 370px;"
                  v-model="driverLicense.initialCertificateDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="驾驶证有效期:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="driverLicense.validPeriod">
                  <template slot="append">年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="驾龄:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="driverLicense.driverAge">
                  <template slot="append">年</template>
                </el-input>
              </el-form-item>
              <el-form-item label="驾驶类型:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;"
                          v-model="driverLicense.licenseType"></el-input>
              </el-form-item>
              <el-form-item label="从业资格证:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;"
                          v-model="driverLicense.qualificationCertificate"></el-input>
              </el-form-item>
              <el-form-item label="入场证信息:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;"
                          v-model="driverLicense.passCertificate"></el-input>
              </el-form-item>
            </el-form>

            <br>
            <!-- 车辆图片上传 -->
            <h3>驾驶证照片</h3>
            <el-upload
              class="avatar-uploader"
              action="/OSSFileApi/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1">

              <el-image :src="picture" class="avatar">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline">图片未上传</i>
                </div>
              </el-image>
            </el-upload>
            <el-divider></el-divider>
            <el-button @click="bianji()" v-show="disabledstatus == true">编辑</el-button>
            <el-button @click="faihui()" v-show="disabledstatus == true">返回</el-button>

            <el-button @click="xiugaiLicense()" v-show="disabledstatus == false">保存</el-button>
            <el-button @click="quxiao()" v-show="disabledstatus == false">取消</el-button>

          </el-card>
        </el-tab-pane>

        <el-tab-pane label="车辆信息">
          <el-card class="box-card">
            <h3>车辆信息</h3>

            <el-form ref="truck" label-width="150px" :inline="true">
              <el-form-item label="当前使用车辆的车牌:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="truckPlate"></el-input>
              </el-form-item>
              <el-form-item label="车辆所属线路:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="lineName"></el-input>
              </el-form-item>
              <el-form-item label="车辆所属车次:">
                <el-input v-bind:disabled="disabledstatus" style="width: 370px;" v-model="tripsName"></el-input>
              </el-form-item>
            </el-form>

            <el-button @click="faihui()">返回</el-button>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import method from '../../../api/logisticsmanagement/transitcenter/DriverManagement'
import {mapState} from 'vuex'

export default {
  name: "driverDetails",
  computed: {
    ...mapState(['ossaddr'])
  },
  data() {
    return {
      tabPosition: 'left',// 方向
      dataAll: [],//  所有详情数据
      driverid: "",//  当前详情车辆的ID
      userid: "",//  当前司机的用户ID
      driverDetailsData: {},//  司机基本数据
      driverLicense: {},//  司机驾驶证
      disabledstatus: true,//  驾驶证信息input的禁用状态(true是禁用,false是非禁用)
      truckPlate: "",//  车牌
      lineName: "",//  车辆路线
      tripsName: "",//  车辆车次
      picture: "",//  图片url
    }
  },
  methods: {
    //  返回上一个组件
    faihui() {
      if(this.$route.query.operate == "driver"){
        this.$router.push({path: '/driverManagement'})
      }else{
        this.$router.push({path: '/driverliebiao',query:{fleetid:this.$route.query.fleetid}})
      }
    },
    //  获取上一个组件传过来的truckId
    driverIdFuZhi() {
      this.userid = this.$route.query.userid
      this.driverid = this.$route.query.id
    },
    //  查询车辆基本信息
    findDriverDetails() {

      method.selDriverDetails(this.driverid).then(({data}) => {

        this.dataAll = data.data
        if (data.data.pdTruckDriver != null) {
          this.driverDetailsData = data.data.pdTruckDriver
        }
        if (data.data.pdTruckDriverLicense != null) {
          this.driverLicense = data.data.pdTruckDriverLicense
          if (this.driverLicense.picture != null && this.driverLicense.picture != "") {
            this.picture = this.ossaddr + "/" + this.driverLicense.picture
          }
        }
        if (data.data.truckPlate != null && data.data.truckPlate != "" && data.data.truckPlate != "null") {
          this.truckPlate = data.data.truckPlate
        }
        if (data.data.lineName != null && data.data.lineName != "" && data.data.lineName != "null") {
          this.lineName = data.data.lineName
        }
        if (data.data.tripsName != null && data.data.tripsName != "" && data.data.tripsName != "null") {
          this.tripsName = data.data.tripsName
        }
        this.$store.commit("startAnimation",false);
      })

    },
    //  开启编辑
    bianji() {

      this.disabledstatus = false
    },
    //  取消编辑
    quxiao() {

      this.disabledstatus = true
    },
    //  保存
    xiugaiLicense() {
      this.driverLicense.picture = this.picture
      this.driverLicense.userId = this.userid
      this.disabledstatus = true
      method.updDriverLicense(this.driverLicense).then(({data}) => {

        if (data.code != 200) {
          this.$notify({
            title: '失败',
            message: '车辆行驶证修改失败!',
            type: 'error'
          });
        } else {
          this.$notify({
            title: '成功',
            message: '车辆行驶证修改成功!',
            type: 'success'
          });
        }
        this.findDriverDetails()
      })
    },
    //  文件上传
    //  文件上传成功后的方法
    handleAvatarSuccess1(res, file) {
      this.picture = URL.createObjectURL(file.raw);
      let images = "/" + res.data.url
      let license = {}
      if(this.dataAll.pdTruckDriverLicense != null && this.dataAll.pdTruckDriverLicense != ""){
         license = {
           "id": this.dataAll.pdTruckDriverLicense.id,
           "picture": images,
            "userId": this.dataAll.driverId,
         }
      }else{
          license = {
            "id": "",
            "picture": images,
             "userId": this.dataAll.driverId,
          }
      }
      method.fileUpload(license).then(({data}) => {
          if(data.code==200){
            this.$notify({
            title: '成功',
            message: '司机驾驶证图片修改成功!',
            type: 'success'
            });
          }
        this.findDriverDetails()
      })

    },
    //  文件上传时的方法
    beforeAvatarUpload1(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  },
  created() {
    this.$store.commit("startAnimation",true);
    this.driverIdFuZhi()
    this.findDriverDetails()
  }
}
</script>
<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
